<template>
  <el-form ref="deptForm" label-width="120px" :model="form" :rules="formRules">
    <el-form-item label="部门名称" prop="name">
      <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门编码" prop="code">
      <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门负责人" prop="manager">
      <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
        <el-option :value="item.username" :label="item.username" v-for="item in list" :key="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="部门介绍" prop="introduce">
      <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
      <el-button size="small" @click="hCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
    import {getEmployees} from '@/api/employees'
    import {addDepartments,getDepartmentsEdit,updateDepartmentsEdit} from '@/api/departments'
export default {
  props:{
    originList:{
      type:Array,
      required:true
    },
    id:{
      type:String,
      required:true
    },
    isEdit:{
      type:Boolean,
      required:true
    }
  },
    data() {
      // 定义一个校验规则函数 校验部门的编码的唯一性
      const vaCodeList=(rule,value,callback)=>{
        // 验证用户输入的value值 在整个项目中的编码是否已经存在
        // 获取整个 部门的编码 编码的数组
        console.log(this.originList);
        let existCodeList = this.originList.map(item=>item.code)
        console.log(existCodeList);
        // 如果是编辑的状态 将当前编辑的部门的编码从存在的数组中移除 然后在判断
        if(this.isEdit){
          existCodeList = this.originList.filter(item => item.id !== this.id).map(item => item.code)
        }
        // 判断当前的value值 是否在数组中存在
        if(existCodeList.includes(value)){
          // 存在 校验失败
          callback(new Error(`该部门编码${value}已存在 请换一个`))
        }else{
          // 不存在 校验通过
          callback()
        }
      }
      // 定义一个校验规则函数 校验部门名称同级不能重复
      const vaNameList =(rule,value,callback)=>{
        // 验证用户输入的value值(部门名称) 在同级部门不能重复
        // 被占用的列表 当前点击的部门 的子部门
        let existNameList = this.originList.map(item => item.name)
        // 编辑时找兄弟处理
        if(this.isEdit){
          // 只能获取到当前编辑的部门id 获取到当前编辑部门的pid
          const pid = this.originList.find(item => item.id === this.id).pid
          console.log(this.originList.find(item => item.id === this.id).pid);
          // 通过pid去所有的部门数据中找当前编辑部门的所兄弟
          const brother = this.originList.filter(item => item.pid === pid)
          // 排除自己
          existNameList = brother.filter(item => item.id !== this.id).map(item => item.name)
        }
        // 判断当前用户输入的value 在被占用列表中是否存在
        if(existNameList.includes(value)){
          // 存在校验失败
          callback(new Error(`该部门名称${value}已存在 请换一个`))
        }else{
          // 不存在校验成功 
          callback()
        }
      }
        return {
            list:[], //存储部门负责人列表
            // 收集表单数据对象
            form:{
                name:'',
                code:'',
                manager:'',
                introduce:''
            },
            formRules:{
                name:[
                    {required:true,message:'请输入部门名称',trigger:'blur'},
                    {min:1,max:50,message:'请输入1-50的部门名称',trigger:'blur'},
                    {validator:vaNameList,trigger:'blur'}
                ],
                code:[
                    {required:true,message:'请输入部门编号',trigger:'blur'},
                    {min:1,max:50,message:'请输入1-50的部门编号',trigger:'blur'},
                    {validator:vaCodeList,trigger:'blur'}
                ],
                manager:[
                    {required:true,message:'请输入部门负责人',trigger:'change'}
                ],
                introduce:[
                    {required:true,message:'请输入部门介绍',trigger:'blur'},
                    {min:1,max:300,message:'请输入1-300的部门介绍',trigger:'blur'}
                ]
            }
        }
    },
    created(){
        this.loadEmployees()
        // 只有是编辑操作才有需要请求详情数据
        if(this.isEdit){
          this.loadDepartmentsEdit()
        }
    },
    methods:{
      // 在子组件中定义重置表单的方法 resetFields
      resetForm(){
        this.$refs.deptForm.resetFields()
      },
        // 获取部门负责人列表
        async loadEmployees(){
            try{
                const res = await getEmployees()
                console.log(res);
                this.list = res.data
            }catch(error){
                console.log(error);
            }
        },
        // 实现添加子部门
        async doAdd(){
          try {
            const res = await addDepartments({pid:this.id,...this.form})
          console.log(res);
          this.$message.success(res.message)
          // 重新渲染 关闭弹层 子传父
          this.$emit('success')
          } catch (error) {
            console.log(error);
          }
        },
        // 实现编辑功能
        async doEdit(id){
          try {
            const res = await updateDepartmentsEdit(this.form)
            console.log(res);
          this.$message.success(res.message)
            // 重新渲染 关闭弹层
            this.$emit('success')
          } catch (error) {
            console.log(error);
          }
        },
        // 加载部门详情数据 填充到表单中
        async loadDepartmentsEdit(id){
          const res = await getDepartmentsEdit(this.id)
          this.$message.success(res.message)
          console.log(res);
          this.form = res.data
        },
        hSubmit(){
          this.$refs.deptForm.validate(valid=>{
            if(!valid) return
            // 实现编辑部门或者新增子部门
          this.isEdit ? this.doEdit() :this.doAdd()
          })
        },
        hCancel(){
          // 关闭弹层 
          // 子传父关闭弹层
          this.$emit('close')
        }
    }

}
</script>
